<template>
  <el-container class="user-profile">
    <el-header>
      <h2>个人中心</h2>
    </el-header>
    <el-main class="main">
      <div v-if="userInfo">
        <el-form :model="userInfo" label-width="80px">
          <el-form-item label="姓名:">
            <el-input v-model="userInfo.name" :disabled="!isEditing" placeholder="未设置" />
          </el-form-item>
          <el-form-item label="手机号:">
            <el-input v-model="userInfo.phone" :disabled="!isEditing" placeholder="未设置" />
          </el-form-item>
          <el-form-item label="性别:">
            <el-select v-model="userInfo.sex" :disabled="!isEditing" placeholder="请选择性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年龄:">
            <el-input-number v-model="userInfo.age" :disabled="!isEditing" placeholder="未设置" />
          </el-form-item>
          <el-form-item label="地址:">
            <el-input v-model="userInfo.address" :disabled="!isEditing" placeholder="未设置" />
          </el-form-item>
          <el-form-item label="角色:">
            <el-select v-model="userInfo.role" disabled>
              <el-option label="员工" value="1"></el-option>
              <el-option label="管理员" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="isEditing ? saveUserInfo() : editUserInfo()">
              {{ isEditing ? '保存' : '编辑' }}
            </el-button>
          </el-form-item>
          <!-- 修改密码部分 -->
          <el-form-item label="新密码:" v-if="showPasswordBox">
            <el-input type="password" v-model="newPassword" placeholder="输入新密码" />
          </el-form-item>
          <el-form-item label="确认密码:" v-if="showPasswordBox">
            <el-input type="password" v-model="confirmPassword" placeholder="确认新密码" />
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="ChangePassword()" v-if="!showPasswordBox">修改密码</el-button>
            <el-button type="danger" @click="saveChangePassword()" v-if="showPasswordBox">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-else>
        <p>加载用户信息中...</p>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      userInfo: null, // 用于存储用户信息
      isEditing: false, // 控制编辑状态
      newPassword: '', // 存储新密码
      confirmPassword: '', // 存储确认密码
      showPasswordBox: false
    };
  },
  methods: {
    getList() {
      let userInfo = JSON.parse(localStorage.getItem('userInfo'));
      if (userInfo) {
        this.userInfo = userInfo; // 获取用户信息
      }
    },
    editUserInfo() {
      this.isEditing = true; // 进入编辑模式
    },
    saveUserInfo() {
    // 验证手机号是否为11位
    const phoneRegex = /^1\d{10}$/;
    if (this.userInfo.phone &&!phoneRegex.test(this.userInfo.phone)) {
        alert('手机号应为11位数字');
        return;
    }
    this.$axios({
        method: "post",
        url: "http://localhost:8080/api/user/updateInfo",
        data: {
            userId: this.userInfo.userId,
            name: this.userInfo.name,
            phone: this.userInfo.phone,
            sex: this.userInfo.sex,
            age: this.userInfo.age,
            address: this.userInfo.address,
            role: this.userInfo.role
        },
    })
      .then(response => {
            alert('用户信息保存成功！');
            console.log(response);
            // 更新localStorage中的用户信息
            localStorage.setItem('userInfo', JSON.stringify(this.userInfo));
            this.isEditing = false; // 保存后退出编辑模式
        })
      .catch(error => {
            console.error('保存用户信息时发生错误:', error);
            alert('保存失败，请重试。');
        });
},
    ChangePassword() {
      this.showPasswordBox = true
    },
    saveChangePassword() {
      // 验证新密码和确认密码是否匹配
      if (this.newPassword === '' || this.confirmPassword === '') {
        alert('密码不能为空');
        return;
      }
      if (this.newPassword !== this.confirmPassword) {
        alert('新密码和确认密码不匹配');
        return;
      }

      this.$axios({
        method: "post",
        url: "http://localhost:8080/api/user/updateInfo",
        data: {
          userId: this.userInfo.userId,
          password: this.newPassword,
        },
      })
        .then(response => {
          alert('密码修改成功');
          console.log(response);
          // 更新 localStorage 中的用户信息
          localStorage.setItem('userInfo', JSON.stringify(this.userInfo));
          this.isEditing = false; // 保存后退出编辑模式
        })
        .catch(error => {
          console.error('保存用户信息时发生错误:', error);
          alert('保存失败，请重试。');
        });
      this.showPasswordBox = false;
    }
  },
  mounted() {
    this.getList();
  },
};
</script>

<style scoped>
.user-profile {
  padding: 20px;
}
</style>
